<template>
    <el-dialog title="更 新" :visible.sync="udpateShow" :before-close="handleClose">
        <el-form ref="userForm" :model="userForm" label-width="180px" :rules="rules">
        <el-form-item label="用户名" prop="userName">
            <el-input v-model="userForm.userName" disabled="disabled"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="userForm.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
            <el-input type="password" v-model="userForm.confirmPassword" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="真实姓名"  prop="realName">
            <el-input  v-model="userForm.realName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="是否授权管理后台"  prop="isAdministrator">
             <el-radio-group v-model="userForm.isAdministrator" size="medium">
                <el-radio border label="1" >是</el-radio>
                <el-radio border label="0" >否</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="状态"  prop="status">
             <el-radio-group v-model="userForm.status" size="medium">
                <el-radio border label="1" >冻结</el-radio>
                <el-radio border label="0" >正常</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="手机号"  prop="phone">
            <el-input  v-model="userForm.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="所属门店"  prop="shopName">
            <el-select v-model="userForm.shopName" placeholder="请选择门店" @change="selectShopCharge">
                <el-option v-for=" (item,key) of shops" :key="key" :value="`${item.id}|${item.shopNo}|${item.shopName}`" :label="item.shopName"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="等级" prop="level">
            <el-select v-model="userForm.level" placeholder="请选择等级">
                <el-option value="0" label="店员"></el-option>
                <el-option value="1" label="店长"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="标记" prop="flag">
            <el-select v-model="userForm.flag" placeholder="请选择标记">
                <el-option value="0" label="无"></el-option>
                <el-option value="1" label="强制签退权限"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="昵称" prop="nickName">
            <el-input v-model="userForm.nickName"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit('userForm')">更 新</el-button>
            <el-button @click="uChange">取 消</el-button>
        </el-form-item>
        </el-form>
    </el-dialog>
</template>
<script>

import { findShopCashierById,saveOrUpdateShopCashier,getShops} from '@api/shop/shop'
import md5 from 'js-md5';
  export default {
    data() {
      var validatePassword = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        }
      };
      var validateConfirmPassword = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.userForm.password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      var validateMobile = (rule, value, callback) => {
        if (value === '') {
          callback()
        }else if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(value))
        && !(/^0\d{2,5}-\d{7,8}$/.test(value))){ 
            callback(new Error('请输入正确的联系方式!'));
        } else {
          callback();
        }
      };
      
      return {
        udpateShow: this.uShow,
        updateId:this.uId,
        userForm: {
          id: null,
          userName: '',
          confirmPassword: '',
          password: '',
          isAdministrator:null,
          status:null,
          realName:'',
          nickName:'',
          shopId:'',
          shopNo:'',
          shopName:'',
          phone: '',
          level: '',
          flag: '0'
        },
        parentIds:[
        ],
        shops:[],
        rules: {
          password: [
            { validator: validatePassword, trigger: 'blur' }
          ],
          confirmPassword: [
            { validator: validateConfirmPassword, trigger: 'blur' }
          ],
          isAdministrator: [
            { required: true, message: '请选择是否授权管理后台', trigger: 'change' }
          ],
          shopName:[
              { required: true}
          ],
          shopId:[
              { required: true}
          ],
          realName: [
            { required: true, message: '请输入realName', trigger: 'blur' },
            { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
          ],
          phone:[
            { validator: validateMobile, trigger: 'blur' }
          ],
        }
      }
    },
    /**双向绑定 start */
    props: ["uShow","uId"],
    watch: {
        uShow(val) {
            this.udpateShow = val;//②监听外部对props属性uShow的变更，并同步到组件内的data属性udpateShow中
        },
        udpateShow(val){
            //xxcanghai 小小沧海 博客园
             this.$emit("on-uShow-change",val);//③组件内对udpateShow变更后向外部发送事件通知
        }
        ,
        uId(val) {
            this.updateId = val;//②监听外部对props属性uShow的变更，并同步到组件内的data属性udpateShow中
            this.loadShopCashier(val)
        },
        updateId(val){
            //xxcanghai 小小沧海 博客园
             this.$emit("on-id-change",val);//③组件内对udpateShow变更后向外部发送事件通知
        }
    },
  
    methods: {
        uChange() {
            this.udpateShow = !this.udpateShow;
        },
          /**双向绑定 end */

        onSubmit(formName) {
            // this.$refs[formName].validate((valid) => {
            // if (valid) {
                this.loading = true
                if(this.userForm.password!=null && this.userForm.password!=''){
                //   console.info(" 用户密码："+this.userForm.password);
                  let password = md5(this.userForm.password)
                  this.userForm.password=password
                }
                // console.log(JSON.stringify(this.userForm))
                saveOrUpdateShopCashier(this.userForm).then(res=>{
                    this.$message({
                    message: '更新成功',
                    type: 'success'
                    });
                     this.$emit("on-loadlist-change");//③组件内对myResult变更后向外部发送事件通知
                     this.loading = false
                     this.uChange()
                }).catch(err=>{
                    console.log('err', err)
                    this.loading = false
                })
               
            // } else {
            //     console.log('error submit!!');
            //     return false;
            // }
            // });
        },
        handleClose(done){
            this.$confirm('确定关闭吗').then(() => {
                // function(done)，done 用于关闭 Dialog
                done();
            }).catch(() => {
               // console.log("点击确定时触发");
            });
        },
        loadShopCashier(id){
            this.loading = true
            findShopCashierById({
                shopCashierId:id+""
            }).then(res=>{
                // console.log( res.data.isAdministrator)
                this.userForm.id= res.data.id,  
                this.userForm.userName= res.data.userName,  
                this.userForm.isAdministrator= res.data.isAdministrator+'',
                this.userForm.status= res.data.status+'',
                this.userForm.realName= res.data.realName,
                this.userForm.nickName= res.data.nickName,
                this.userForm.shopId= res.data.shopId,
                this.userForm.shopNo= res.data.shopNo,
                this.userForm.shopName= res.data.shopName,
                this.userForm.phone= res.data.phone,
                this.userForm.level= res.data.level+'',
                this.userForm.flag= res.data.flag+'',
                this.userForm.password=null;
                this.userForm.confirmPassword=null,
                this.loading = false
            }).catch(err=>{
                console.log('err', err)
                this.loading = false
            })
        },
        selectShopCharge(){
            if (this.userForm.shopName) {
                const [value,shopNo,lable] = this.userForm.shopName.split('|')
                this.userForm.shopId = value
                this.userForm.shopNo = shopNo
                this.userForm.shopName = lable
            }
        }
    },
    created(){
        //console.log("created");
    },
    mounted(){
        //console.log("mounted");
        //预加载部门信息
        getShops().then(res => {
              // console.log(JSON.stringify(res.data))
              this.shops = res.data
              this.loading = false
        }).catch(err => {
            console.log('err', err)
            this.loading = false
        })
    },
    computed:{
       
    }
  }
</script>